import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
// import { NativeRouter, Route, Link } from 'react-router-native'
import { View, Text } from 'react-native'

const Home = () => <View><Text>Home</Text></View>

const About = () => <View><Text>About</Text></View>

const Topic = ({match}) => <View><Text>{`TopicId: ${match.params.id}`}</Text></View>

const Topics = () => <View><Text>Topics</Text></View>

class MainLayout extends PureComponent {
  render () {
    return (
      <NativeRouter>
        <View>
          <Link to="/"><Text>{this.props.songer}</Text></Link>
          <Link to="/about"><Text>About</Text></Link>
          <Link to="/topics"><Text>Topics</Text></Link>
          <Link to="/topic/123"><Text>topic 123</Text></Link>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/Topics" component={Topics}></Route>
          <Route path="/topic/:id" component={Topic}></Route>
        </View>
      </NativeRouter>
    )
  }
}

const mapStateToProps = state => {
  const { list, songer } = state
  return {
    list,
    songer
  }
}

export default connect(mapStateToProps)(MainLayout)
